<template>
  <view>
    <picker
      range-key="label"
      :range="langOptions"
      :value="langIndex"
      @change="handleLangChange"
    >
      <slot>
        <image
          :style="langStyle"
          src=""
        ></image>
      </slot>
    </picker>
  </view>
</template>

<script setup>
import { computed } from "vue";
import { useI18n } from "vue-i18n";

const emit = defineEmits(["change"]);
const props = defineProps({
  size: {
    type: Number,
    default: 40,
    required: false,
  },
});

const { locale, t } = useI18n();
const langStyle = {
  width: props.size + "rpx",
  height: props.size + "rpx",
};
const langOptions = computed(() => {
  return [
    { label: t("locale.en"), value: "en" },
    { label: t("locale.zh-hans"), value: "zh-Hans" },
    { label: t("locale.zh-hant"), value: "zh-Hant" },
    { label: t("locale.ja"), value: "ja" },
  ];
});
const langIndex = computed(() => {
  return langOptions.value.findIndex((item) => {
    return item.value === locale.value;
  });
});
function handleLangChange(event) {
  const lang = langOptions.value[event.detail.value].value;
  locale.value = lang;
  uni.setLocale(lang);
  emit("change", lang);
}
</script>

<style lang="scss" scoped></style>
